<template>
	<view class="container">
		<!-- 个人资料区域 -->
		<view class="profile">
			<Person />
			<!-- 菜单栏 -->
			<view class="menus">
				<view class="menus-item right-arrow" v-for="item in menus" :key="item.key" @click="clickMenu(item)">
					<text>{{ item.key }}</text>
					<!-- 循环展示菜单项 -->
				</view>
			</view>
		</view>
	</view>
	<!-- 登出按钮，点击执行logout方法 -->
	<view class="login-out" @click="logout">Logout</view>
	<!-- Tabbar组件 -->
	<Tabbar />
</template>

<script setup>
	import Tabbar from '@/components/Tabbar/Tabbar.vue';
	import Person from './components/person.vue'
	import {
		navigateTo
	} from '@/utils/index.js';
	import {
		ref
	} from 'vue';

	import useUserStore from '@/store/user';

	// 页面初始化时设置的菜单列表
	const menus = ref([
		// {
		// 	key: 'Collection',
		// 	path: '/pages/collection/index',
		// },
		{
			key: 'Wrong',
			path: '/pages/collection/index',
		},
		{
			key: 'Plan',
			path: '/pages/plan/index',
		},
		{
			key: 'History',
			path: '/pages/profile/history/history',
		},
		{
			key: 'Setting',
			path: '/pages/profile/setting/setting',
		},
	]);

	// 登出功能，重定向到登录页
	const logout = () => {
		useUserStore().userLogout()
		// navigateTo('/pages/login/index');
	};
	/**
	 * 点击菜单项时触发的函数。
	 * @param {Object} item - 被点击的菜单项，包含菜单项的路径信息。
	 * @returns 无返回值。
	 */
	const clickMenu = (item) => {
		navigateTo(item.path); // 根据菜单项的路径信息进行页面导航
	};
</script>

<style lang="scss" scoped>
	@import './profile.scss';
</style>